<!-- 职位详情 -->
<template>
    <div class="job_detail_content">
        <div class="flex jcsb zhiwei_main">
            <div class="">
                <p class="paddingt5">
                    <span class="zhiwei_title fonts fonts24 fontw700">{{ state.datas.positionName || "-" }}</span>
                    <span class="fonts fonts20 red" style="margin-left: 16px;">￥{{ state.datas.salaryStart || "" }}-{{
                        state.datas.salaryEnd || "" }}{{ state.datas.salaryUnit || "" }} {{ state.datas.salaryRange
                        }}薪</span>
                </p>
                <p class="fonts18 fontz gray paddingt5">{{ state.datas.requirementsYears || "-" }} | {{
                        state.datas.educationRequirements || "-" }} | {{ state.datas.positionClassify || "-" }} | {{
                        state.datas.ageRequirementsStart
                        || ""
                    }}-{{ state.datas.ageRequirementsEnd || "" }} | {{ state.datas.arrivalTime || "-" }} | {{ state.datas.workNature || "-" }}</p>
                <p class="fonts18 fontz gray paddingt5">招聘人数：{{ state.datas.recruitmentNumber || 0 }}人</p>
                <p class="fonts18 fontz gray paddingt5">更新时间：{{ state.datas.updateTime || "-" }}</p>
                <p class="fonts18 fontz gray flex aic paddingt5">
                    <img src="../../../assets/imgs/c4.png" alt="" srcset=""
                        style="width: 16px;height: 18px;margin-right: 6px;" />
                    {{ state.datas.applicationAddress || "" }}
                </p>
                <div class="flex aic " style="flex-wrap: wrap;">
                    <p class="Information_main_left_btn fontz" v-for="(item, index) in state.arrays" :key="index">{{
                        item }}
                    </p>
                </div>
            </div>
            <div class="flex zhiwei_main_button">
                <!-- <el-button type="danger">放弃笔试</el-button>
                <el-button type="primary">投递职位</el-button> -->
                <!-- <el-button type="primary">确认参加</el-button>
                                        <el-button type="primary">上传体检报告</el-button>
                                        <el-button type="primary" icon="el-icon-star-off">收藏</el-button>
                                        <el-button type="primary" icon="el-icon-star-on">收藏</el-button> -->
            </div>
        </div>
        <div class="zhiwei_main">
            <p class="">
                <span class="zhiwei_title fonts fonts24 fontw700">职位描述</span>
            </p>
            <div class="">
                <p class="fonts18 fontz paddingt5">{{ state.datas.positionDesc || "暂无职位描述" }}</p>
                <!-- <p class="fonts18 fontz paddingt5">岗位职责：</p>
                <p class="fonts16 fontz paddingt5">1、负责办公室行政和后勤类工作；</p>
                <p class="fonts16 fontz paddingt5"> 2、负责部分简易公文撰写；</p>
                <p class="fonts16 fontz paddingt5"> 3、领导交办的其他事宜。</p> -->
            </div>
            <!-- <div class="">
                <p class="fonts18 fontz paddingt5">岗位要求：</p>
                <p class="fonts16 fontz paddingt5">1、负责办公室行政和后勤类工作；</p>
                <p class="fonts16 fontz paddingt5"> 2、负责部分简易公文撰写；</p>
                <p class="fonts16 fontz paddingt5"> 3、领导交办的其他事宜。</p>
            </div> -->
        </div>
        <div class="zhiwei_main">
            <p class="">
                <span class="zhiwei_title fonts fonts24 fontw700">审核记录</span>
            </p>
            <el-table :data="state.datas.recruitmentPositionExamineLogVos" style="width: 100%;margin-top: 16px;"
                :headerCellStyle="headerCellStyle" :rowStyle="rowStyle">
                <el-table-column prop="status" label="审核结果">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.row.status == 0 ? "未通过" : scope.row.status == 1 ? '待审核' : scope.row.status ==
                        2 ? "已通过" : "已关闭" }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createByUserNickName" label="操作账号" />
                <el-table-column prop="resultComment" label="审核未通过原因" />
                <el-table-column prop="createTime" label="操作时间" />
            </el-table>
        </div>
        <div class="flex" style="justify-content: flex-end;">
            <ElButton type="primary" @click="passFun">
                审核通过
            </ElButton>
            <ElButton type="danger" @click="noPassFun">
                审核未通过
            </ElButton>
        </div>



    </div>
</template>
<style lang="less" scoped>
.job_detail_content {
    .line {
        border: 1px solid #D8D8D8;
    }

    .zhiwei_main_lc_main {
        padding: 12px;
        background: #F8F9FA;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
    }

    .zhiwei_main_lc {
        padding: 20px 32px;

        .zhiwei_main_lc_title {
            position: relative;

            &::after {
                position: absolute;
                content: "";
                top: 5px;
                left: -32px;
                width: 16px;
                height: 16px;
                border-radius: 50%;

                opacity: 1;
                border: 1px solid #2F6CBC;


            }

            &::before {
                content: "";
                position: absolute;
                top: 9px;
                left: -28px;
                width: 8px;
                height: 8px;
                background: #2F6CBC;
                opacity: 1;
                border-radius: 50%;
            }
        }

    }

    .Information_main_left_btn {
        margin: 0;
        padding: 0px 14px;
        margin: 5px;
        line-height: 30px;
        background: #EFF3F7;
        border-radius: 15px 15px 15px 15px;
        opacity: 1;
        font-size: 18px;
        font-weight: 400;
        color: #2F6CBC;
    }

    .zhiwei_main {
        padding: 25px;
        background: #FFFFFF;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border: 1px solid #CACFD6;
        margin-bottom: 11px;
    }

    .zhiwei_main_button {
        .el-button {
            height: 40px;
        }
    }

    .zhiwei_title {
        position: relative;

        &::after {
            position: absolute;
            left: -25px;
            top: 10px;
            content: "";
            width: 4px;
            height: 16px;
            background: #2F6CBC;
            border-radius: 0px 2px 2px 0px;
            opacity: 1;
        }
    }

    .red {
        color: #B60000;
    }

    .gray {
        color: #898989;
    }

    .paddingt5 {
        padding: 5px 0px;
    }
}

.jobDetail_table {
    width: 100%;
}
</style>

<script lang="tsx" setup>
import { getdictApi } from "@/api/home/index";
import { reactive, unref, ref, watch } from "vue"
import { ElButton, ElInput, ElMessage, ElMessageBox, ElSwitch } from 'element-plus'
import { getPositionListApi, editPositionApi, editPositionApis, getPositionDetailApi } from "@/api/job/index"


const state = reactive({
    dictData: [],
    tableData: [] as any,
    arrays: [] as any,
    datas: {} as any
})
// 表格头部信息
const headerCellStyle: any = {
    "background": "#F2F6FC",
    "height": "48px"
}
const props = defineProps({
    data: {
        type: Object,
        default: () => { }
    },
})


const getdictApis = async () => {
    await getdictApi().then((res: any) => {
        console.log(res);
        state.dictData = res.data
        // let array = props.data.welfareTreatment.split(',')
        let array = state.datas.welfareTreatment.split(',')
        console.log("福利：", array);
        let arrays = [] as any
        array.forEach(elementl => {
            state.dictData.forEach((element: any) => {
                if (element.dictType == "welfare_treatment") {
                    element.dictDataList.forEach(elements => {
                        if (elements.dictValue == elementl) {
                            arrays.push(elements.dictLabel ? elements.dictLabel : "")
                        }
                    });
                }
            });
        })
        state.dictData.forEach((element: any) => {
            if (element.dictType == "requirements_years") {
                element.dictDataList.forEach(elements => {
                    // console.log("----------------------------------", elements.dictValue, state.datas["requirementsYears"]);
                    if (elements.dictValue == state.datas["requirementsYears"]) {
                        state.datas["requirementsYears"] = elements.dictLabel ? elements.dictLabel : ""
                    }
                });
            }
            if (element.dictType == "education") {
                element.dictDataList.forEach(elements => {
                    // console.log("----------------------------------", elements.dictValue, state.datas["educationRequirements"]);
                    if (elements.dictValue == state.datas["educationRequirements"]) {
                        state.datas["educationRequirements"] = elements.dictLabel ? elements.dictLabel : ""
                    }
                });
            }
            if (element.dictType == "position_classify") {
                element.dictDataList.forEach(elements => {
                    // console.log("----------------------------------", elements.dictValue, state.datas["positionClassify"]);
                    if (elements.dictValue == state.datas["positionClassify"]) {
                        state.datas["positionClassify"] = elements.dictLabel ? elements.dictLabel : ""
                    }
                });
                // state.datas["positionClassify"] = element.dictLabel
            }
            if (element.dictType == "arrival_time") {
                element.dictDataList.forEach(elements => {
                    // console.log("----------------------------------", elements.dictValue, state.datas["arrivalTime"]);
                    if (elements.dictValue == state.datas["arrivalTime"]) {
                        state.datas["arrivalTime"] = elements.dictLabel ? elements.dictLabel : ""
                    }
                });
                // state.datas["positionClassify"] = element.dictLabel
            }
            if (element.dictType == "work_nature") {
                element.dictDataList.forEach(elements => {
                    // console.log("----------------------------------", elements.dictValue, state.datas["arrivalTime"]);
                    if (elements.dictValue == state.datas["workNature"]) {
                        state.datas["workNature"] = elements.dictLabel ? elements.dictLabel : ""
                    }
                });
                // state.datas["positionClassify"] = element.dictLabel
            }
            // if (element.dictType == "position_classify") {
            //     state.datas["positionClassify"] = element.dictLabel
            // }
        });
        state.arrays = arrays
        console.log(arrays);

    })
}
const passFun = () => {
    console.log("审核通过");
    ElMessageBox.confirm('职位审核通过后，该职位将发布在官网', '请确认该职位审核通过？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern:,
        draggable: true,
    })
        .then(() => {
            let params = {
                id: props.data.id,
                status: 2
            }
            editPositionApi(params).then((res: any) => {

                ElMessage({
                    type: 'success',
                    message: `${res.msg}`,
                })
            }).catch((res: any) => {
                ElMessage({
                    type: 'error',
                    message: `${res.msg}`,
                })
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })


}
const noPassFun = () => {
    console.log("审核未通过");
    ElMessageBox.prompt('审核未通过原因', '职位审核未通过？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern:,
        draggable: true,
        inputPlaceholder: "请输入审核未通过原因",
        inputErrorMessage: '请输入审核未通过原因',
    })
        .then(({ value }) => {
            let params = {
                id: props.data.id,
                status: 0,
                resultComment: value,
            }
            editPositionApi(params).then((res: any) => {

                ElMessage({
                    type: 'success',
                    message: `${res.msg}`,
                })
            }).catch((res: any) => {
                ElMessage({
                    type: 'error',
                    message: `${res.msg}`,
                })
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })

}
watch(props.data, (newValue, oldValue) => {
    console.log('watch 已触发', newValue)
    state.datas = newValue
    getdictApis()
}, { deep: true, immediate: true })
</script>
